<template>
    <div class="listView">
       <listview-top :playlist="playlist"></listview-top>
       <play-list :playlist="playlist"></play-list>
    </div>
</template>

<script>
    import { getPlaylistDetail } from '@/api/index'
    import { onMounted,reactive,toRefs} from 'vue'
    import { useRoute } from 'vue-router'
    // 
    import listviewTop from '@/components/ListViewTop/listviewTop.vue'
    // 
    import playList from '@/components/ListViewTop/playList.vue'
    // 
    import store from '../store/index'
    export default {
        components:{
            listviewTop,playList
        },
        setup(){
            const route = useRoute()
            // 获取歌单详情数据
            let state = reactive({
                list:[],
                playlist:{
                    creator:{},
                    tracks:[]
                }
            })
            onMounted(async ()=>{
                // 获取从歌单传过来的id
                let id = route.query.id
                // console.log(route)
                let result = await getPlaylistDetail(id)
                state.playlist = result.data.playlist
                store.commit('setPlayList',state.playlist.tracks)
                // console.log(result)
            })
            return{
                ...toRefs(state),
                route
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>
